<template>
  <div style="padding: 12px">
    <div>
      <a-form
        layout="inline"
        :model="formState"
        @finish="handleFinish"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item>
          <a-input v-model:value="formState.user" placeholder="Username">
            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model:value="formState.password" type="password" placeholder="Password">
            <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            @click='searchData'
          >
            查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            @click='printData'
          >
            打印
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="padding-top: 10px">
      <a-table :columns="columns" :data-source="dataSource" bordered :loading="loading">
        <template #bodyCell="{ column, text, record }">
          <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
            <div>
              <a-input
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key][column.dataIndex]"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
              <span v-else>
            <a @click="edit(record.key)">Edit</a>
          </span>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>

</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash-es';
import { onMounted, reactive, ref } from 'vue'
import type { UnwrapRef } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import type { FormProps } from 'ant-design-vue';
import { getData } from "../../api/api"


interface FormState {
  user: string;
  password: string;
}
const formState: UnwrapRef<FormState> = reactive({
  user: '',
  password: '',
});
const loading = ref(false)
const handleFinish: FormProps['onFinish'] = values => {
  console.log(values, formState);
};
const handleFinishFailed: FormProps['onFinishFailed'] = errors => {
  console.log(errors);
};
const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    width: '25%',
  },
  {
    title: 'age',
    dataIndex: 'age',
    width: '15%',
  },
  {
    title: 'address',
    dataIndex: 'address',
    width: '40%',
  },
  {
    title: 'operation',
    dataIndex: 'operation',
  },
];
interface DataItem {
  key: string;
  name: string;
  age: number;
  address: string;
}
const data= ref<DataItem[]>([]);

onMounted(() =>{
  searchData()
})

function searchData() {
  getData().then((res:any) =>{
    //console.log(res.list)
    loading.value = !loading.value;
    data.value = [];
    setTimeout(() =>{
      data.value = res.list;
      loading.value = !loading.value;
    },1000);

  })
}


function printData() {
  window.print();
}




const dataSource = ref(data);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
  editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = (key: string) => {
  Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
  delete editableData[key];
};
const cancel = (key: string) => {
  delete editableData[key];
};

</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
